<template>
	<div class="page-con fdisrc">
		<form enctype="multipart/form-data">
			<div class="file-drag-con fdiscxy" ref="dragBoxRef">拖拽文件至此区域上传</div>
			<div class="fdisr" style="margin-top: 10px; width: 600px; justify-content: center">
				<div class="form-file-upload">
					<label for="picture" class="upload-btn">选择文件</label>
					<input style="opacity: 0; width: 40px" type="file" id="picture" name="图片" multiple accept="image/png,image/jpeg,image/jpg" />
				</div>
				<div class="form-file-upload" style="margin-left: 40px">
					<label for="folder" class="upload-btn">选择文件夹</label>
					<input style="opacity: 0; width: 40px" type="file" id="folder" name="图片" multiple accept="image/png,image/jpeg,image/jpg" webkitdirectory />
				</div>
			</div>
		</form>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const dragBoxRef = ref();

onMounted(() => {
	let dragBox = document.querySelector(".file-drag-con");
    
    dragBox?.addEventListener("dragleave", (e) => {
        e.preventDefault();
    })   
	dragBox?.addEventListener("dragover", (e) => {
		e.preventDefault();
	});

	dragBox?.addEventListener("drop", (e) => {
		e.preventDefault();
		
		const items = e.dataTransfer.items;
		for (let i of items) {
			const entry = i.webkitGetAsEntry();
			//console.log("items", entry)
			if (entry.isFile) {
				//文件
				entry.file((file) => {
					//file就是文件的数据
				});
			} else {
				//文件夹
				const reader = entry.createReader();
				reader.readEntries((entries) => {
					console.log("entry", entries);
				});
			}
		}
	});
});
</script>

<style scoped lang="scss">
.page-con {
	width: 100%;
	height: 100%;
	background-color: lightblue;
	align-items: center;

	.form-file-upload {
	}

	.file-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.file-drag-con {
		width: 600px;
		height: 400px;
		border: 2px solid #f4f4f4;
		border-radius: 20px;
		margin-bottom: 20px;
	}

	.upload-btn {
		display: flex;
		min-width: 120px;
		height: 32px;
		padding: 0 20px;
		// border: 1px solid #409eff;
		background-color: #409eff;
		color: white;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		cursor: pointer;

		&:active {
			background-color: #347ecc;
		}

		&:hover {
			background-color: #79bbff;
		}
	}
}
</style>
